<!-- 主页面 -->
<template>
    <el-container>
        <el-header>
            <div class="header">
                <div class="header-logo">
                    <HeaderLogo />
                </div>
                <div class="header-collapse">
                    <HeaderCollapse />
                </div>
                <div class="header-menu">
                    <HeaderMenu />
                </div>

                <div class="header-user">
                    <HeaderUser />
                </div>
            </div>
            <!-- <HeaderBreadcrumb /> -->
        </el-header>

        <el-container>

            <el-aside :width="slideMenuWidth">
                <SlideMenu />
            </el-aside>

            <el-main>
                <div class="main"><router-view /></div>
            </el-main>

        </el-container>

    </el-container>
</template>

<script>
import HeaderLogo from './header/header-logo'
import HeaderCollapse from './header/header-collapse'
import HeaderMenu from './header/header-menu'
import HeaderUser from './header/header-user'
import HeaderBreadcrumb from './header/header-breadcrumb'
import SlideMenu from './slide/slide-menu'

import { mapState } from 'vuex'
export default {
    data() {
        return {
        };
    },
    components: { HeaderLogo, HeaderCollapse, HeaderMenu, HeaderUser, HeaderBreadcrumb, SlideMenu, },
    computed: {
        ...mapState('extends/collapse', ['slideMenuWidth'])
    },
    methods: {}
}

</script>
<style lang='less' scoped>
@header-height: 60px;


.el-header {
    width: 100vw;
    height: @header-height;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    transition: all 0.2s ease-in-out;

    .header {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;


        .header-logo,
        .header-menu {
            height: @header-height;
        }

        .header-collapse {
            margin: 0 20px;
        }

        .header-user {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 20px;
        }
    }




}

.el-aside {
    overflow: auto;
    height: calc(100vh - @header-height);
    margin-top: calc(@header-height);

    transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -moz-transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -o-transition: width 0.15s;
}

.el-main {
    padding: 0;

    .main {
        background: #F5F7FB;
        height: calc(100vh - @header-height);
        margin-top: calc(@header-height);
    }

}
</style>